<template>
    <div class="menuMgt">
      <Tree :data="menuTree" :render="renderContent"></Tree>
      <menuEdit ref="menuEdit" @getList="_getAllMenu"></menuEdit>
    </div>
</template>

<script>
  import MenuEdit from '@/components/page/systemSetting/menuMgt/menuEdit'
  export default {
    name: 'menuMgt',
    data(){
      return{
        menuTree: [
          {
            title: '天下医生',
            id: 0,
            isFolder: 'all',
            expand: true,
            render: (h, { root, node, data }) => {
            return h('span', {
              style: {
                display: 'inline-block',
                width: '100%'
              }
            }, [
              h('span', [
                h('Icon', {
                  props: {
                    type: 'ios-folder-outline'
                  },
                  style: {
                    marginRight: '8px'
                  }
                }),
                h('span', data.title)
              ]),
              h('span', {
                style: {
                  display: 'inline-block',
                  float: 'right',
                  marginRight: '40%'
                }
              }, [
                h('Button', {
                  props: Object.assign({}, this.buttonProps, {
                    icon: 'ios-add',
                    type: 'primary'
                  }),
                  style: {
                    width: '100px'
                  },
                  on: {
                    click: () => { this.add(data) }
                  }
                })
              ])
            ]);
          },
            children: []
          }
         ],
        ren: (h, { root, node, data }) => {
            return h('span', {
              style: {
                display: 'inline-block',
                width: '100%'
              }
            }, [
              h('span', [
                h('Icon', {
                  props: {
                    type: 'ios-folder-outline'
                  },
                  style: {
                    marginRight: '8px'
                  }
                }),
                h('span', data.title)
              ]),
              h('span', {
                style: {
                  display: 'inline-block',
                  float: 'right',
                  marginRight: '40%'
                }
              }, [
                h('Button', {
                  props: Object.assign({}, this.buttonProps, {
                    icon: 'ios-add',
                    type: 'primary'
                  }),
                  style: {
                    width: '64px'
                  },
                  on: {
                    click: () => { this.append(data) }
                  }
                })
              ])
            ]);
          },
        buttonProps: {
          type: 'default',
          size: 'small',
        }
      }
    },
    mounted(){
      this._getAllMenu()
    },
    methods: {
      _getAllMenu(){
        this.ajax({
          type: this.api.menuList.type,
          url: this.api.menuList.url,
          data: {},
          success: (data) => {
            data = JSON.stringify(data.object)
            data = data.replace(/text/g,'title')
            data = JSON.parse(data)
            this.menuTree[0].children = this._getEditBut(data)
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      _getEditBut(menuTree) {
        let _this = this
        selectMenu(menuTree)
        function selectMenu(menuTree) {
          menuTree.forEach((menu) => {
            // menu.render = _this.ren
            // if (menu.children&&menu.children.length) {
            //   selectMenu(menu.children)
            // }
          })
        }
        return menuTree
      },
      renderContent (h, { root, node, data }) {
        if (data.isFolder != 0) {
          return h('span',{
            style: {
              display: 'inline-block',
              width: '100%'
            }
          }, [
            h('span', [
              h('Icon', {
                props: {
                  type: 'ios-paper-outline'
                },
                style: {
                  marginRight: '8px'
                }
              }),
              h('span', data.title)
            ]),
            h('span', {
              style: {
                display: 'inline-block',
                float: 'right',
                marginRight: '40%'
              }
            }, [
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-build-outline'
                }),
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: () => { this.update(data) }
                }
              }),
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-add'
                }),
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: () => { this.add(data) }
                }
              }),
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-remove'
                }),
                on: {
                  click: () => { this.del(root, node, data) }
                }
              })
            ])
          ]);
        } else {
          return h('span',{
            style: {
              display: 'inline-block',
              width: '100%'
            }
          }, [
            h('span', [
              h('Icon', {
                props: {
                  type: 'ios-paper-outline'
                },
                style: {
                  marginRight: '8px'
                }
              }),
              h('span', data.title)
            ]),
            h('span', {
              style: {
                display: 'inline-block',
                float: 'right',
                marginRight: '40%'
              }
            }, [
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-build-outline'
                }),
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: () => { this.update(data) }
                }
              }),
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-remove'
                }),
                on: {
                  click: () => { this.del(root, node, data) }
                }
              })
            ])
          ])
        }

      },
      update (data) {
        this.$refs.menuEdit.openView(data, 'update', this.menuTree[0].children)
        // const children = data.children || [];
        // children.push({
        //   title: 'appended node',
        //   expand: true
        // });
        // this.$set(data, 'children', children);
      },
      add (data) {
        this.$refs.menuEdit.openView(data, 'add', this.menuTree[0].children)
        // const children = data.children || [];
        // children.push({
        //   title: 'appended node',
        //   expand: true
        // });
        // this.$set(data, 'children', children);
      },
      del (root, node, data) {
        this.$Modal.confirm({
          title: '确认',
          content: '<p>您确认删除该菜单？</p>',
          onOk: () => {
            this.ajax({
              type: this.api.menuDel.type,
              url: this.api.menuDel.url,
              data: {
                id: data.id
              },
              success: (data) => {
                this.$Message.success(data);
                this._getAllMenu()
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          },
          onCancel: () => {}
        });
        // const parentKey = root.find(el => el === node).parent;
        // const parent = root.find(el => el.nodeKey === parentKey).node;
        // const index = parent.children.indexOf(data);
        // parent.children.splice(index, 1);
      }
    },
    components: {
      MenuEdit
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
    .menuMgt {
      margin: 50px 100px;
    }
    .ivu-tree ul{
      font-size: 14px;
    }
</style>
